﻿<template>
  <el-container style="height: 800px; border: 0px solid #eee">
    <el-aside width="300px">
      <el-menu
        default-active="5"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
        <!-- 菜单栏 -->
        <router-link to="/page">
          <el-menu-item index="1"><span>表白墙</span></el-menu-item>
        </router-link>
        <router-link to="/market">
          <el-menu-item index="2"><span>跳蚤市场</span></el-menu-item>
        </router-link>
        <router-link to="/recruit">
          <el-menu-item index="3"><span>招募</span></el-menu-item>
        </router-link>
        <router-link to="/find">
          <el-menu-item index="4"><span>找搭子</span></el-menu-item>
        </router-link>
        <router-link to="/article">
          <el-menu-item index="5"><span>发帖</span></el-menu-item>
        </router-link>
        <router-link to="/person">
          <el-menu-item index="6"><span>个人中心</span></el-menu-item>
        </router-link>
      </el-menu>
    </el-aside>

    <el-main>
      <div>
        <h1>发帖页面</h1>
        <el-form
          :model="post"
          ref="postForm"
          label-width="150px"
          style="height: 150px"
        >
          <el-form-item label="标题" required prop="title">
            <el-input v-model="post.title" class="large-input" />
          </el-form-item>
          <el-form-item label="内容" required prop="content">
            <el-input
              type="textarea"
              v-model="post.content"
              class="large-textarea"
            />
          </el-form-item>
          <el-form-item
            label="发布到页面"
            required
            prop="page"
            class="large-input"
          >
            <el-select v-model="post.page" placeholder="选择页面">
              <el-option label="表白墙" value="PostsPage"></el-option>
              <el-option label="跳蚤市场" value="PostsMarket"></el-option>
              <el-option label="招募" value="PostsRecruit"></el-option>
              <el-option label="找搭子" value="PostsFind"></el-option>
              <!-- 添加更多页面选项 -->
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitPost">发布</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      post: {
        title: "",
        content: "",
        page: "",
        userId: "",
        username: "",
      },
      imagePreview: null,
    };
  },
  created() {
    // 从sessionStorage中读取用户信息
    this.post.userId = JSON.parse(sessionStorage.getItem("userInfo")).data.id;
    this.post.username = JSON.parse(
      sessionStorage.getItem("userInfo")
    ).data.name;
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },

    submitPost() {
      this.$refs.postForm.validate((valid) => {
        if (valid) {
          // 构造帖子数据
          const postData = {
            title: this.post.title,
            content: this.post.content,
            page: this.post.page,
            userId: this.post.userId,
            username: this.post.username,
            // 可根据需要添加其他属性
          };

          // 发送帖子数据至后端
          axios
            .post("http://localhost:8082/posts/create", postData) // 假设这是后端接口地址
            .then(() => {
              // 处理成功的响应
              this.$message.success("帖子发布成功");
              // console.log(postData.userId);
              // console.log(postData.page);
            })
            .catch(() => {
              // 处理失败的响应
              this.$message.error("帖子发布失败");
            });
        } else {
          this.$message.error("请填写必要信息");
        }
      });
    },
  },
};
</script>

<style scoped>
/* 主框架 */
.el-aside {
  color: #333;
}

/* 去掉下划线 */
a {
  text-decoration: none;
}

.large-input {
  height: 75px; /* 设置输入框的高度 */
  font-size: 20px; /* 设置字体大小 */
}

.large-textarea {
  width: 800px; /* 设置文本域的宽度 */
  height: 75px; /* 设置文本域的高度 */
  font-size: 16px; /* 设置字体大小 */
  /* 可以添加其他样式，如边框和填充，根据需要进行自定义 */
}
</style>
